<template>
    <div>
        <div class="center-bj">
            <span class="yys-box">
                <img class="yys-img" src="../../../static/img/yys.png" alt="">
                <em class="yys-name">随访专员</em>
            </span>
            <img class="yys-pic" :src="info.avatar" alt="">
            <span class="center-name">{{info.user_nickname}}</span>
        </div>
        <ul class="clearfix info-list">
            <router-link :to="{name:'myPatients',query:{patientsTitle:'我的营养师'}}" tag="li" class="clearfix b-g-f info-list-li">
                <img class="info-li-img" src="../../../static/img/my-huanzhe.png" alt="">
                <span class="hz-qrcode">我的营养师</span>
            </router-link>
        </ul>
        <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
            <ul class="follow-hz clearfix b-g-f">
                <li class="follow-dian-box">
                    <img class="order-dian order-dian1" src="../../../static/img/tuoyuan.png" alt="">
                    我的患者
                </li>
                <router-link :to="{name:'patients',query:{follow:'follow',id:item.id,imgPath:item.avatar,name:item.user_nickname}}" tag="li" class="follow-hz-list clearfix" v-for="(item,index) in followPatient" :key="index">
                    <img class="follow-hz-img" :src="item.avatar" alt="">
                    <div class="follow-name-box">
                        <span class="follow-name">{{item.user_nickname}}</span>
                        <span class="follow-order-num">营养师：{{item.dietitian_name}}</span>
                    </div>
                </router-link>
            </ul>
        </van-list>
    </div>
</template>
<script>
export default {
    data(){
        return{
            info:{},
            page:0,
            followPatient:[],
            loading:false,
            finished:false,
        }
    },
    mounted(){},
    methods:{
        onLoad(){
            this.followInfo()
        },
        // 随访者个人资料
        followInfo(){
            this.$api.shopping.userGetInfo().then(resp=>{
                if(resp.code == 1){
                    this.info = resp.data
                    this.myPatientForFollow()
                }
            })
        },
        // 我的患者
        myPatientForFollow(){
            this.page++
            this.$api.follow.myPatientForFollow({page:this.page}).then(resp=>{
                if(resp.code == 1){
                    this.loading = false
                    if(resp.data.length > 0){
                        resp.data.forEach(e=>{
                            this.followPatient.push(e)
                        })
                    }else{
                        this.finished = true
                    }
                }
            })
        }
    }
}
</script>

<style lang="less" scoped>
.follow-hz{
    border-radius: 20px;
    margin: 30px 40px;
    .follow-dian-box{
        margin: 0 20px;
        font-size: 40px;
        padding: 30px 0 0;
        height: 56px;
        .follow-dian{
            width: 16px;
            height: 14px;
            border-radius: 50%;
            float: left;
            display: block;
            background-color: #56a0ea;
            margin-right: 15px;
            margin-top: 16px;
        }
    }
    .follow-hz-list{
        margin: 0 20px;
        padding: 20px 0;
        background-image: url('../../../static/img/you.png');
        background-repeat: no-repeat;
        background-position: center right 30px;
        background-size: 20px;
        border-bottom:solid #f5f5f5 2px;
        .follow-hz-img{
            width: 132px;
            height: 132px;
            float: left;
            border-radius: 50%;
        }
        .follow-name-box{
            margin-left: 170px;
            span{
                display: block;
            }
            .follow-name{
                padding-top: 5px;
                font-size: 40px;
            }
            .follow-order-num{
                line-height: 60px;
                font-size: 34px;
                color: #888;
            }
        }
    }
}
</style>
